<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible">
    {{row.compCode}}
    <el-form :model="form">
      <el-form-item label="联系人1" label-width="120px">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="联系人2" label-width="120px">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script type="text/javascript">
  define(['vue'],function(vue){
    //注意下面不能使用label
    return vue.component('comp-dialog-user',{
      props:[],
      template:template,
      data : function() {
        return {
          //必须参数,每次按钮点击后,这个变量都会变更为当前行
          row : {},
          //可选参数
          dialogFormVisible:false,
          form:{},
          title:'弹窗',
        };
      },
      methods:{
        //作为行编辑按钮自定义组件的必须事件，点击时默认触发
        handelClick:function(row) {
          this.row=row;
          this.dialogFormVisible = true;
        },
        show : function(row) {
          this.row = row;
          this.dialogFormVisible = true;
        },
        hide : function() {
          this.dialogFormVisible = false;
        }
      },
      mounted:function() {
        //初始化后需要马上触发 click事件，
        this.handelClick(this.$attrs.row);
        //抛出onmount事件
        this.$emit('on-mount',this);
      },    
    });
  });
</script>
<style>
</style>